<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D路径</title>
</head>
    <style>
        @keyforms a2{
            transform: rotateY(90deg);
        }
        body{
            transform-style: preserve-3d;
        }
        .box{
            perspective: 200px;
            width: 500px;
            height: 500px;
            top:300px;
            left: 500px;
            position: relative;
            animation: a2 1s linear 5s;
        }
        @keyframes a{
            100%{
                transform:translateZ(300px);
            }
        }
        @keyframes a1{
            100%{
                transform:translateZ(300px) translateX(-300px) rotateY(-90deg) ;
            }
        }
        #one{
            width: 200px;
            height: 200px;
            position: absolute;
            top:0px;
            left:0px;
            /*border: 1px solid #f00;*/
            transform-style: preserve-3d;
            animation: a 5s ease-in-out forwards;
        }
        #one div{
            height: 200px;
            position: absolute;
            overflow: hidden;
            border: 0;
            /*opacity: 0.5;*/
        }
        #one div:nth-of-type(1){
            background: url(img/pic1.jpg);
            width: 200px;
            transform: translateZ(-300px);
        }
        #one div:nth-of-type(2){
            background: url(img/pic2.jpg);
            width: 200px;
            transform: translateZ(300px);
        }
        #one div:nth-of-type(3){
            background: url(img/pic3.jpg);
            width: 600px;
            transform: rotateY(90deg) translateZ(-100px);
            /*opacity:0.5;*/
        }
        #one div:nth-of-type(4){
            background: url(img/pic4.jpg);
            width: 600px;
            transform: rotateY(90deg) translateZ(-300px);
        }
        #one div:nth-of-type(5){
            background: url(img/pic5.jpg);
            width: 600px;
            transform: rotateY(90deg) rotateX(90deg) translateZ(-100px) translateY(-200px);
        }
        #one div:nth-of-type(6){
            background: url(img/pic6.jpg);
            width: 600px;
            transform: rotateY(90deg) rotateX(90deg) translateZ(100px) translateY(-200px);
        }
        @keyframes b{
            100%{
                transform: rotateY(90deg) translateZ(300px);
            }
        }
        #two{
            width: 200px;
            height: 200px;
            position: absolute;
            top:0px;
            left:200px;
            border: 1px solid #f00;
            transform-style: preserve-3d;
            animation: b 5s ease-in-out 7s;
            transform: rotateY(90deg);
        }
        #two div{
            height: 200px;
            position: absolute;
            overflow: hidden;
            border: 0;
        }
        #two div:nth-of-type(1){
            background: url(img/pic1.jpg);
            width: 200px;
            transform: translateZ(-300px);
        }
        #two div:nth-of-type(2){
            background: url(img/pic2.jpg);
            width: 200px;
            transform: translateZ(300px);
        }
        #two div:nth-of-type(3){
            background: url(img/pic3.jpg);
            width: 600px;
            transform: rotateY(90deg) translateZ(-100px);
            opacity:0.5;
        }
        #two div:nth-of-type(4){
            background: url(img/pic4.jpg);
            width: 600px;
            transform: rotateY(90deg) translateZ(-300px);
        }
        #two div:nth-of-type(5){
            background: url(img/pic5.jpg);
            width: 600px;
            transform: rotateY(90deg) rotateX(90deg) translateZ(-100px) translateY(-200px);
        }
        #two div:nth-of-type(6){
            background: url(img/pic6.jpg);
            width: 600px;
            transform: rotateY(90deg) rotateX(90deg) translateZ(100px) translateY(-200px);
        }
    </style>
<body>
   <div class="box">
        <div id='one'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id=two>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
   </div>
   
</body>
    <script>
        
    </script>
</html>